import { message, Tooltip, Table, Space, Divider, Popconfirm } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle } from "@douyinfe/semi-icons";
import { useModel, history } from "umi";

import useHelperProxyServers from "../../helper/useHelperProxyServers";

import useAllProxyServers from "../../hooks/proxy_servers/useAllProxyServers";
import useUpdateProxyServer from "../../hooks/proxy_servers/useUpdateProxyServer";
import useDeleteProxyServer from "../../hooks/proxy_servers/useDeleteProxyServer";
import useCheckProxyServer from "../../hooks/proxy_servers/useCheckProxyServer";

const { Column } = Table;

const ProxyServersPage = () => {
    const { windowInnerHeight } = useModel("global");
    const { openCreateModal, openEditModal } = useHelperProxyServers();
    const { loading, loadAllProxyServers, proxyServers } = useAllProxyServers();
    const { loading: deleteLoading, deleteProxyServer } = useDeleteProxyServer();
    const { loading: checkLoading, checkProxyServer } = useCheckProxyServer();
    const { updateProxyServer } = useUpdateProxyServer();

    const checkRunning = async (record) => {
        let isRuning = await checkProxyServer(record.proxyUrl);
        let res = await updateProxyServer({
            ...record,
            runningStatus: isRuning,
        });
        if (res) {
            message.success("成功更改运行状态信息");
            loadAllProxyServers();
        }
    };

    const renderTime = (_, r, i) => _ && formatUTCTime(_);

    const renderUsageStatus = (_, r, i) => <UsageStatus record={r} status={_} reloadData={loadAllProxyServers} />;

    const renderRunningStatus = (_, r, i) => (_ ? <span style={{ color: "#87d068" }}>运行中</span> : <span style={{ color: "#f50" }}>已停运</span>);

    const renderOperate = (_, r, i) => {
        return (
            <Space size={0} split={<Divider type="vertical" />}>
                <a onClick={() => openEditModal({ record: r, reloadData: loadAllProxyServers })}>编辑</a>
                <a onClick={() => checkRunning(r)}>检查</a>
                <Popconfirm
                    title={`确认要删除该代理服务信息吗？`}
                    okButtonProps={{ loading: deleteLoading }}
                    onConfirm={() =>
                        deleteProxyServer(r.proxyUuid, (res) => {
                            if (res) {
                                message.success("成功删除代理服务信息");
                                loadAllProxyServers();
                            }
                        })
                    }
                >
                    <a style={{ color: "#f50" }}>删除</a>
                </Popconfirm>
            </Space>
        );
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>所有代理服务信息</span>}
                headerExtraContent={
                    <ButtonGroup>
                        <Button icon={<IconPlusCircle />} onClick={() => openCreateModal({ reloadData: loadAllProxyServers })}>
                            添加代理服务
                        </Button>
                        <Button icon={<IconRefresh />} onClick={loadAllProxyServers}>
                            重新加载
                        </Button>
                    </ButtonGroup>
                }
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight }}
            >
                <Table loading={loading} dataSource={proxyServers} bordered pagination={false} rowKey="proxyUrl" scroll={{ y: cardBodyHeight - 55 }}>
                    <Column title="序号" align="center" width={70} render={(_, r, i) => i + 1} />
                    <Column title="代理URL" dataIndex="proxyUrl" />
                    <Column title="备注说明" dataIndex="proxyTitle" />
                    <Column title="禁用状态" dataIndex="disabled" width={100} align="center" render={renderUsageStatus} />
                    <Column title="运行状态" dataIndex="runningStatus" width={100} align="center" render={renderRunningStatus} />
                    <Column title="创建时间" dataIndex="createTime" width={160} align="center" render={renderTime} />
                    <Column title="更新时间" dataIndex="updateTime" width={160} align="center" render={renderTime} />
                    <Column title="操作" align="center" width={160} render={renderOperate} />
                </Table>
            </SemiCard>
        </div>
    );
};

const UsageStatus = ({ record, status, reloadData }) => {
    const { loading, updateProxyServer } = useUpdateProxyServer();

    const updateUsageStatus = async (status) => {
        let res = await updateProxyServer({
            ...record,
            disabled: !status,
        });
        if (res) {
            message.success("成功更改禁用状态信息");
            reloadData();
        }
    };

    return (
        <Popconfirm title={`确认要改变可用状态为：【${status ? "可用" : "禁用"}】 吗？`} okButtonProps={{ loading }} onConfirm={() => updateUsageStatus(status)}>
            <a>{status ? <span style={{ color: "#f50" }}>禁用</span> : "可用"}</a>
        </Popconfirm>
    );
};

export default ProxyServersPage;
